<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>
        <el-tabs :stretch="true" v-model="activeTab">
            <el-tab-pane label="基础" name="base">
                <el-alert type="info" v-if="module.items == 0" style="font-size: 10px; color: #999">请先上传图片</el-alert>
                <draggable class="banners" filter=".banner-item.new" v-model="module.items">
                    <div :class="{
                        'banner-item': true,
                        active: index == currentIndex,
                        banner: true,
                    }" v-for="(banner, index) in module.items" @click="currentIndex = index" :key="index">
                        <image-picker v-model="banner.url" :padding="10" width="80" height="80" :canChange="false"
                            @delete="deleteHandle(index)"></image-picker>
                        <div class="border"></div>
                    </div>

                    <div class="banner-item .new">
                        <image-picker width="80" height="80" v-model="newUrl" @change="newImageHandle"></image-picker>
                    </div>
                </draggable>
                <banner-form :data="currentBanner"></banner-form>
                <el-form-item label="轮播间隔">
                    <el-input style="width: 200px" placeholder="请输入数字" type="number" min="1"
                        v-model="module.data.interval"></el-input>
                    秒
                </el-form-item>

            </el-tab-pane>
            <el-tab-pane label="样式" name="style">
                <el-form-item label="图片宽度">
                    <el-input-number style="width: 200px" v-model="module.data.imageWidth" :min="0" :max="750"
                        controls-position="right"></el-input-number>
                </el-form-item>

                <el-form-item label="图片圆角">
                    <el-input-number style="width: 200px" v-model="module.data.imageRadius" :min="0" :max="50"
                        controls-position="right"></el-input-number>
                </el-form-item>

                <module-style-editor :module="module"></module-style-editor>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script>
import ModuleStyleEditor from "../ModuleStyleEditor/Index";
import BannerForm from "./BannerForm";
import ImagePicker from "@/components/ImagePicker";
import draggable from "vuedraggable";
import SliderInput from "@/components/SliderInput";
// import style
//import "swiper/css/swiper.css";
// If you use Swiper 6.0.0 or higher
//import "swiper/swiper-bundle.css";

export default {
    components: {
        ImagePicker,
        SliderInput,
        draggable,
        ModuleStyleEditor,
        BannerForm,
    },
    data () {
        return {
            banner: {},
            newUrl: "",
            activeTab: "base",
            showForm: true,
            currentIndex: 0,
            fileTypes: ["image"],
            loading: false,
        };
    },
    props: {
        module: { type: Object },
    },

    mounted: function () { },

    computed: {
        currentBanner: {
            get () {
                if (this.module.items.length == 0) {
                    return null;
                }
                return this.module.items[this.currentIndex];
            },
            set (v) { },
        },
    },
    methods: {
        selectHandle: function (index) {
            this.currentIndex = index;
        },

        newImageHandle: function (url) {
            if (!url) {
                return false;
            }

            this.newUrl = "";
            var n = this.module.items.length + 1;
            var banner = { url: url, title: "图片" + n, link: {} };
            this.module.items.push(banner);
            // 自动选择新上传的
            this.currentIndex = this.module.items.length - 1;
            this.newUrl = null;
        },

        deleteHandle: function (index) {
            if (index <= this.currentIndex) {
                // 删除左边的banner，向前移动
                var i = index - 1;
                i = i < 0 ? null : i;
                this.currentIndex = i;
            }
            this.module.items.splice(index, 1);
        },
        imageSelected: function (files) {
            // TODO new images
            var _this = this;
            files.forEach((f, i) => {
                var banner = { url: f.url, title: "图片", link: {} };
                _this.module.items.push(banner);
            });
        },
    },
};
</script>

<style scoped>
.banners {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.banners .banner-item {
    margin: 10px 20px 10px 5px;
    box-sizing: border-box;
    position: relative;
}

.banners .banner-item:nth-child(4n) {
    margin-right: 0;
}

.banners .banner-item.active .border {
    border: 1px solid #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.tips {
    font-size: 12px;
    color: #666;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
</style>
